<template>
	<view class="wrap">
		<form @submit="submit">
			<view class="top">
				<view class="item">
					<view class="left">会员昵称</view>
					<input type="text" placeholder-class="line" placeholder="请填写会员昵称" name="nickname"
						v-model="nickname" />
				</view>
				<view class="item">
					<view class="left">会员头像</view>
					<!-- <u-upload ref="uUpload" name="avatarurl" :fileList="oldAvatarUrl" max-count="1" :action="action"
						upload-text="上传头像" :auto-upload="false" @on-success="uploadsuccess" @on-error="uploaderror"
						@on-choose-complete="chooseimg" :form-data="formData" :header="header"></u-upload> -->
					<u-upload ref='uUpload' :fileList="oldAvatarUrl" @afterRead="afterRead" @delete="deletePic"
						name="avatarurl" multiple :maxCount="1" :action='action' upload-text='上传头像'></u-upload>
				</view>
				<view class="item">
					<view class="left">会员性别</view>
					<view class="right">
						<u-radio-group v-model="sex" @change="radioGroupChange" active-color="orange">
							<u-radio v-for="(item, index) in sexlist" :key="index" :name="item.value">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="item" @tap="showBirthdayPicker">
					<view class="left">会员生日</view>
					<picker mode="date" :show='birthdayShow' @change="getBirthday">{{birthday}}</picker>
				</view>
				<view class="item" @click="regionVisible=true">
					<view class="left">所在地址</view>
					<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" name="region"
						v-model="region" />
				</view>
			</view>
			<regionPicker :visible.sync="regionVisible" mode="region" default-type="value" :hide-area="false"
				@confirm="onConfirm($event,'region')" ref="region">{{region}}</regionPicker>
			<u-picker mode="time" ref="uPicker" v-model="birthdayShow" @confirm="birthdayConfirm" />
			<button form-type="submit" type="warn">保存并使用</button>
			<button form-type="reset">重置</button>
		</form>
	</view>
</template>

<script>
	// 引入地区模块
	import regionPicker from "@/components/region/w-picker.vue";

	export default {
		components: {
			regionPicker
		},
		data() {
			return {
				fileList1: [],
				// 头像提交的服务端地址
				action: this.$baseUrl + '/api/editinfo',
				id: '', //初始化修改数据id
				// 头像提交服务端地址
				action: this.$URL + `/api/infoedit`,
				// 需要展示的图片列表比如展示需要编辑的用户头像
				oldAvatarUrl: [],
				// 表单数据(不含头像信息)
				formData: {},
				// 初始化header头
				header: {},
				oldImg: '', //初始化旧图片
				regionVisible: false, //初始化地区选择器开关
				nickname: '鲁班', //初始化收件人姓名
				region: '北京市市辖区朝阳区', //初始化地区默认值
				birthday: '1992-02-14',
				birthdayShow: false,
				sexlist: [{
						value: 1,
						name: '男'
					},
					{
						value: 2,
						name: '女'
					},
				],
				sex: 1, //初始化会员性别
				setPhoto: false, //是否修改头像状态值
			}
		},

		onLoad() {
			// 获取用户信息  type:1
			this.getUserInfo(1);
		},

		methods: {
			// 读取前
			beforeRead(file, lists, name) {
				// this.oldImg =
				console.log(file, lists, name);
				// this.setPhoto = false;
			},
			// 读取后
			async afterRead(file) {
				console.log(file);
				// console.log(file.file[0].url);
				this.oldAvatarUrl = [{
					url: file.file[0].url
				}]
				this.setPhoto = true
			},
			radioGroupChange() {},
			// 删除图片
			deletePic(event) {
				this.oldAvatarUrl = [];
			},
			// 获取生日
			getBirthday(e) {
				// console.log(e);
				this.birthday = e.detail.value
				// console.log(this.birthday);
			},
			// 选择会员地区
			onConfirm(res) {
				// console.log(res);
				this.region = res.result
			},

			// 开始生日选择器
			showBirthdayPicker() {
				this.birthdayShow = true;
			},
			// 获取用户信息
			async getUserInfo(type) {
				let {
					token,
					uid
				} = uni.getStorageSync('userInfo')
				let result = await this.$http({
					url: '/getuserinfo',
					header: {
						authorization: token
					},
					data: {
						uid: uid
					}
				})
				// console.log(result);
				// 获取成功
				if (result.data.code == 200) {
					// 判断用户是修改用户信息  还是获取用户信息
					if (type == 1) {
						//获取用户信息
						let userinfo = result.data.list[0];
						// console.log(userinfo.region);
						// 赋值用户信息
						this.nickname = userinfo.nickname;
						this.birthday = userinfo.birthday == null ? '2022-01-01' : userinfo.birthday;
						this.region = userinfo.region;
						this.sex = userinfo.sex;
						this.id = userinfo.id;
						this.oldAvatarUrl = [{
							url: this.$baseUrl + userinfo.avatarurl
						}]
					} else {
						// console.log(result.data.list[0]);
						// console.log(this.oldAvatarUrl);
						// 添加token
						result.data.list[0].token = token;
						result.data.list[0].region = this.region;
						result.data.list[0].birthday = this.birthday
						// result.data.list[0].avatarurl = this.
						//修改用户信息  将修改过后的缓存在本第
						uni.setStorageSync('userInfo', result.data.list[0]);
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/mine/mine'
							})
						}, 2000)
					}

				} else {
					// 获取失败
					uni.showToast({
						title: result.data.msg,
						icon: 'error'
					})
				}
			},
			// 修改用户信息
			async submit(e) {
				let {
					token,
					uid
				} = uni.getStorageSync('userInfo')
				let {
					nickname,
					region
				} = e.detail.value
				// console.log(this);
				let {
					id,
					sex,
					birthday
				} = this
				this.header = {
					authorization: token
				}
				// 没有修改头像的
				this.formData = {
					id,
					nickname,
					region,
					sex,
					birthday
				}
				// 修改头像的请求头
				let user = {
					id,
					nickname,
					region,
					sex,
					birthday

				}
				console.log(user);
				if (this.setPhoto) {
					console.log('修改头像');
					// 修改头像
					uni.uploadFile({
						url: '/api/api/infoedit',
						filePath: this.oldAvatarUrl[0].url, // 要上传文件资源的路径
						name: "avatarurl", // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
						formData: user, // 要传递的参数
						header: { // 请求头
							authorization: this.$store.state.userInfo.token
						},
						success: (res => {
							if (res.statusCode === 200) {
								this.getUserInfo(2)
							}
						})
					})
				} else {
					console.log('不修改头像');
					// 没有修改头像
					let result = await this.$http({
						url: '/infoedit',
						method: 'post',
						header: {
							authorization: token
						},
						data: {
							id: this.id,
							nickname: this.nickname
						}
					})
					// 修改成功
					if (result.data.code == 200) {
						// 	更新缓存信息
						console.log(result.data);
						// 修改用户信息  type;2
						this.getUserInfo(2);
						// // uni.setStorageSync('userInfo',)
						// return
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						})

					} else {
						// 修改失败
						uni.showToast({
							title: result.data.msg,
							icon: 'error',

						})
						return
					}
				}



			},
		}
	}
</script>

<style lang="scss" scoped>
	// 引入样式
	// @import '@/static/css/userinfo.scss';
	/deep/ .line {
		color: $u-light-color;
		font-size: 28rpx;
	}

	.wrap {
		background-color: #f2f2f2;

		.top {
			background-color: #ffffff;
			border-top: solid 2rpx $u-border-color;
			padding: 22rpx;

			.item {
				display: flex;
				font-size: 32rpx;
				line-height: 100rpx;
				align-items: center;
				border-bottom: solid 2rpx $u-border-color;

				.left {
					width: 180rpx;
				}

				input {
					text-align: left;
				}
			}

			.address {
				padding: 20rpx 0;

				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}
			}

			.site-clipboard {
				padding-right: 40rpx;

				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}

				.clipboard {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: $u-tips-color;
					height: 80rpx;

					.icon {
						margin-top: 6rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.bottom {
			margin-top: 20rpx;
			padding: 40rpx;
			padding-right: 0;
			background-color: #ffffff;
			font-size: 28rpx;

			.tag {
				display: flex;

				.left {
					width: 160rpx;
				}

				.right {
					display: flex;
					flex-wrap: wrap;

					.tags {
						width: 140rpx;
						padding: 16rpx 8rpx;
						border: solid 2rpx $u-border-color;
						text-align: center;
						border-radius: 50rpx;
						margin: 0 10rpx 20rpx;
						display: flex;
						font-size: 28rpx;
						align-items: center;
						justify-content: center;
						color: $u-content-color;
						line-height: 1;
					}

					.plus {
						//padding: 10rpx 0;
					}
				}
			}

			.default {
				margin-top: 50rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: solid 2rpx $u-border-color;
				line-height: 64rpx;

				.tips {
					font-size: 24rpx;
				}

				.right {}
			}
		}
	}
</style>